{% macro svgellipse(className) -%}
<svg height="16pt" viewBox="0.00 0.00 30.00 16.00" width="30pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g class="{{ className }}"><ellipse cx="15" cy="8" rx="15" ry="8"/></g></svg>
{%- endmacro %}

{% macro svgarrow(color="black", cssclass="") -%}
<svg height="16pt" viewBox="0.00 0.00 30.00 16.00" width="30pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g class="{{ cssclass }}"><path d="M0,8 L25,8" fill="none" stroke="{{ color }}"></path><polygon stroke="{{ color }}" fill="{{ color }}" points="25,6 25,10 30,8"></polygon></g></svg>
{%- endmacro %}

{% macro stripePattern(patternName, classA, classB) -%}
<pattern id="{{ patternName }}" x="0" y="0" width="20" height="80" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><g class="{{ classA }}"><rect x="0" y="0" width="10" height="80"/></g><g class="{{ classB }}"><rect x="10" y="0" width="10" height="80"/></g></pattern>
{%- endmacro %}

{% macro button(id, label, onclick="", disabled=False) -%}
<span class="button {% if disabled %} disabled {% endif %}" id="{{ id }}" {% if onclick %} onclick="{{ onclick }}" {% endif %}><span>{{ label }}</span></span>
{%- endmacro %}

{% macro openImplicationKey(show, gatewayPage) -%}
{% if show %}
<tr><td>{{ svgarrow("green", "highlightArrow") }}</td><td> <a href="{{ gatewayPage }}#openImplications" target="_blank">Strongest</a> open implication </td></tr>
<tr><td>{{ svgarrow("red", "highlightArrow") }}</td><td> <a href="{{ gatewayPage }}#openImplications" target="_blank">Weakest</a> open implication </td></tr>
{% endif %}
{%- endmacro %}
